﻿.speech-wave-line {
    line-height: 46px;
    display: inline-block;
}

    .speech-wave-line > span {
        background-color: #187cff;
        width: 3px;
        height: 10px;
        margin: 0 5px;
        display: inline-block;
        border: none;
    }

    .speech-wave-line.line > span {
        animation: note 0.2s ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    .speech-wave-line.line .l1 {
        animation-delay: -1s;
    }

    .speech-wave-line.line .l2 {
        animation-delay: -0.9s;
    }

    .speech-wave-line.line .l3 {
        animation-delay: -0.8s;
    }

    .speech-wave-line.line .l4 {
        animation-delay: -0.7s;
    }

    .speech-wave-line.line .l5 {
        animation-delay: -0.6s;
    }

    .speech-wave-line.line .l6 {
        animation-delay: -0.5s;
    }

    .speech-wave-line.line .l7 {
        animation-delay: -0.4s;
    }

    .speech-wave-line.line .l8 {
        animation-delay: -0.3s;
    }

    .speech-wave-line.line .l9 {
        animation-delay: -0.2s;
    }

    .speech-wave-line.line .l10 {
        animation-delay: -0.1s;
    }

@keyframes note {
    from {
        transform: scaleY(1)
    }

    to {
        transform: scaleY(4)
    }
}

.speech-wave-time {
    margin-left: 1rem;
}
